<template>
  <!--新图表界面-->
  <div class="context">
    <!--图表1-->
    <div class="pictureContext animate__animated animate__fadeInLeft">
      <div class="pictureTitle">
        <center><span>事件成功提醒柱状图</span></center>
      </div>
      <div id="picture_1" class="pictureStyle"></div>
    </div>
    <!--图表2-->
    <div class="pictureContext animate__animated animate__fadeInRight">
      <div class="pictureTitle">
        <center><span>事件成功提醒对比图</span></center>
      </div>
      <div id="picture_2" class="pictureStyle"></div>
    </div>

    <!--图表3-->
    <div class="pictureContext animate__animated animate__fadeInLeft">
      <div class="pictureTitle">
        <center><span>事件类别玫瑰图</span></center>
      </div>
      <div id="picture_3" class="pictureStyle"></div>
    </div>

    <!--图表4-->
    <div class="pictureContext animate__animated animate__fadeInRight">
      <div class="pictureTitle">
        <center><span>未提醒视图饼图</span></center>
      </div>
      <div id="picture_4" class="pictureStyle"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "newPicture",
  data() {
    return {
      pictureOneData: [
        {
          name: '邮箱发送',
          data: []
        },
        {
          name: '短信发送',
          data: []
        },
        {
          name: '打卡率',
          data: [10,20,33,45,63,24,62]
        }
      ],
      pictureOneXTitle: [], //图1x轴标题
      pictureTwoData: [
        // ['日期', '12月13日', '12月14日', '12月15日', '12月16日', '12月17日', '12月18日'],
        // ['邮件', 56, 82, 88, 70, 53, 85],
        // ['短信', 51, 51, 55, 53, 73, 68],
        ['日期', '12月13日', '12月14日', '12月15日', '12月16日', '12月17日', '12月18日'],
        ['邮件', 56, 82, 88, 70, 53, 85],
        ['短信', 51, 51, 55, 53, 73, 68],
      ],
      pictureThreeData: [
        // {value: 40, name: '比赛'},
        // {value: 38, name: '吃瓜'},
        // {value: 32, name: '追剧'},
        // {value: 30, name: '看动漫'},
        // {value: 28, name: '看电影'},
        // {value: 26, name: '约会'},
        // {value: 22, name: '上课'},
        // {value: 18, name: '做作业'},
        // {value: 40, name: '发布作业'},
        // {value: 38, name: '睡觉'},
        // {value: 32, name: '早起'},
        // {value: 30, name: '看衣服'},
        // {value: 28, name: '购物'},
        // {value: 26, name: '和好朋友逛街'},
      ],
      pictureFourData: []
    }
  },
  methods: {
    //设置图片
    pictureOne() {
      let chartDom = document.getElementById('picture_1');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false}, 数据视图
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true}, //还原
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: [this.pictureOneData[0].name, this.pictureOneData[1].name, this.pictureOneData[2].name]
        },
        xAxis: [
          {
            type: 'category',
            data: this.pictureOneXTitle,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '发送条数',
            min: 0,
            minInterval: 1,
            axisLabel: {
              formatter: '{value} 条'
            }
          },
          {
            type: 'value',
            name: '打卡率',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: this.pictureOneData[0].name,
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 条';
              }
            },
            data: this.pictureOneData[0].data
          },
          {
            name: this.pictureOneData[1].name,
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 条';
              }
            },
            data: this.pictureOneData[1].data
          },
          {
            name: this.pictureOneData[2].name,
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: this.pictureOneData[2].data
          }
        ]
      }
      option && myChart.setOption(option);
    },
    pictureTwo() {
      let chartDom = document.getElementById('picture_2');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        legend: {},
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false}, 数据视图
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true}, //还原
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: this.pictureTwoData
        },
        xAxis: {type: 'category'},
        yAxis: {
          gridIndex: 0,
          min: 0,
          minInterval: 1,
        },
        grid: {top: '55%'},
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: '日期',
              value: this.pictureTwoData[0][1],
              tooltip: this.pictureTwoData[0][1]
            }
          }
        ]
      };
      myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      myChart.setOption(option);
      option && myChart.setOption(option);
    },
    pictureThree() {
      let chartDom = document.getElementById('picture_3');
      let myChart = echarts.init(chartDom);
      let option = {
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: 20,
          bottom: 20,
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            // dataView: { show: true, readOnly: false },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '类型详情',
            type: 'pie',
            radius: [50, 150],
            center: ['55%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 3
            },
            data: this.pictureThreeData
          }
        ]
      };
      option && myChart.setOption(option);
    },
    pictureFour() {
      let chartDom = document.getElementById('picture_4');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false}, 数据视图
            // magicType: {show: true, type: ['line', 'bar']},
            // restore: {show: true}, //还原
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: 20,
          bottom: 20,
        },
        series: [
          {
            name: '成功发送',
            type: 'pie',
            radius: '50%',
            data: this.pictureFourData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },

    //获取对应的值 图表1/2
    getOneData(){
      this.$axios({
        url: '/pictureTable/getPictureOne/'+this.$store.state.userContext.userid,
        method: 'GET'
      }).then( response =>{
        //设置图表1的值
        for (let index=0;index<this.pictureOneData.length;index++){
          this.pictureOneData[index].data = response.data[index].values;
        }
        console.log(response.data);
        //设置图表1的x轴
        this.pictureOneXTitle = response.data[response.data.length-1].values;
        //设置图表二的值
        for (let index=0;index<response.data.length;index++){
          if (index === 2)
            continue;
          if (index === 0 || index === 1){
            for (let v_index=1;v_index<=response.data[index].values.length;v_index++){
              this.pictureTwoData[index+1][v_index] = response.data[index].values[v_index]
            }
          }
          if (index === 3){
            for (let v_index=1;v_index<=response.data[index].values.length;v_index++){
              this.pictureTwoData[index-3][v_index] = response.data[index].values[v_index]
            }
          }
        }

        this.pictureOne(); //设置图1
        this.pictureTwo(); //设置图2
      }).catch( error =>{
        console.log(error);
      })
    },
    //获取对应的图表 3
    getThreeData(){
      this.$axios({
        url:'/pictureTable/getPictureThree/'+this.$store.state.userContext.userid,
        method: 'GET',
      }).then( response =>{
        for (let index=0;index<response.data.length;index++){
          let dataTemplate = {
            name: "",
            value: 0,
          }
          dataTemplate.name = response.data[index].name;
          dataTemplate.value = response.data[index].value;
          this.pictureThreeData.push(dataTemplate);
        }
        this.pictureThree(); //启动图三
      }).catch( error =>{
        console.log(error);
      })
    },
    //获取对应的图表 4
    getFourData(){
      this.$axios({
        url: '/pictureTable/getPictureFour/'+this.$store.state.userContext.userid,
        method: "GET",
      }).then( response =>{
        for (let index=0;index<response.data.length;index++) {
          let dataTemplate = {
                name: '',
                value: 0,
              }
          dataTemplate.name = response.data[index].name;
          dataTemplate.value = response.data[index].value;
          this.pictureFourData.push(dataTemplate);
        }
        this.pictureFour();
      }).catch( error =>{
        console.log(error);
      })
    }
  },
  mounted() {
    this.getOneData();
    this.getThreeData();
    this.getFourData();
  }
}
</script>

<style scoped>
.context {
  width: 94%;
  height: 100%;
  /*background-color: #ffcdd2;*/
  float: left;
  margin-bottom: 2%;
}
.pictureTitle {
  width: 100%;
  height: 7%;
  border-bottom: 1px solid #909399;
  margin-bottom: 1%;
  padding-top: 1%;
  border-radius: 5% 5% 0px 0px;
}

.pictureTitle span {
  font-size: 18px;
  text-align: center;
}

.pictureContext {
  width: 48%;
  height: 75%;
  margin-left: 2%;
  float: left;
  margin-top: 1%;
  background-color: #ffffff;
  border-radius: 5%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.pictureStyle {
  width: 100%;
  height: 90%;
  margin-top: 2%;
}
</style>
